<template>
  <div class="HomePage_Carousel_left" @mouseleave="mouseleave">
    <!--  -->
    <ul>
      <li
        v-for="(item, index) in containerList"
        :key="index"
        class="carousel-item"
        @mousemove="mousemove(item)"
      >
        <div class="item-container">
          <span class="item-text">{{ item.containerName }}</span>
          <div class="item-submenu" v-for="temp in item.submenu" :key="temp.id">
            <span class="submenu-text">{{ temp.name }}</span>
          </div>
        </div>
        <span class="arrow-icon">
          <i class="el-icon-arrow-right icon-style"></i>
        </span>
      </li>
    </ul>
    <div class="popUpBox">
      <div v-if="!isBrand">
        <div class="box-style">
          <span class="title-text">分类推荐</span>
          <span class="recommend-text">根据您的购买或浏览记录推荐</span>
        </div>
        <ul class="recommend-list">
          <li
            v-for="(item, index) in recommendList"
            :key="index"
            class="recommend-item"
          >
            <div class="recommend-img"></div>
            <div class="recommend-info">
              <p class="name-text">{{ item.name }}</p>
              <p class="desc-text">{{ item.desc }}</p>
              <p class="price-text">{{ item.price }}</p>
            </div>
          </li>
        </ul>
      </div>
      <div v-else class="container">
        <div v-for="(temp, index) in recommendList" :key="index" class="column">
          <div class="header">
            <span class="header-text">{{
              index == 0 ? "品牌制造商" : "热门品牌"
            }}</span>
            <span class="header-link">
              查看全部
              <i class="el-icon-arrow-right"> </i>
            </span>
          </div>
          <div class="brand-list">
            <div class="brand-item" v-for="(item, index) in temp" :key="index">
              <div class="brand-logo"></div>
              <div class="brand-name">品牌名称</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomePageCarouselLeft",
  data() {
    return {
      isBrand: false,
      containerList: [
        {
          id: "1",
          containerName: "服装",
          submenu: [
            {
              name: "毛衫",
            },
            {
              name: "外衣",
            },
          ],
          children: [
            {
              id: "1-1",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-2",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-3",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-4",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-5",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-6",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-7",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-8",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-9",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
          ],
        },
        {
          id: "2",
          containerName: "餐厨",
          submenu: [
            {
              name: "餐具",
            },
            {
              name: "茶具",
            },
          ],
          children: [
            {
              id: "1-1",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-2",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-3",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-4",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-5",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-6",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-7",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥249",
            },
            {
              id: "1-8",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥229",
            },
            {
              id: "1-9",
              name: "女式超柔软拉毛运动开衫",
              desc: "匠心剪裁,垂感质地",
              price: "¥21",
            },
          ],
        },
        {
          id: "10",
          containerName: "品牌",
          submenu: [
            {
              name: "品牌制造商",
            },
          ],
          children: [
            [
              {
                id: "10-1",
                name: "品牌名称",
              },
              {
                id: "10-1",
                name: "品牌名称",
              },
              {
                id: "10-1",
                name: "品牌名称",
              },
              {
                id: "10-1",
                name: "品牌名称",
              },
              {
                id: "10-1",
                name: "品牌名称",
              },
              {
                id: "10-1",
                name: "品牌名称",
              },
              {
                id: "10-1",
                name: "品牌名称",
              },
              {
                id: "10-1",
                name: "品牌名称",
              },
              {
                id: "10-1",
                name: "品牌名称",
              },
              {
                id: "10-1",
                name: "品牌名称",
              },
              {
                id: "10-1",
                name: "品牌名称",
              },
              {
                id: "10-1",
                name: "品牌名称",
              },
            ],
            [
              {
                id: "10-2",
                name: "品牌名称",
              },
              {
                id: "10-2",
                name: "品牌名称",
              },
              {
                id: "10-2",
                name: "品牌名称",
              },
              {
                id: "10-2",
                name: "品牌名称",
              },
              {
                id: "10-2",
                name: "品牌名称",
              },
              {
                id: "10-2",
                name: "品牌名称",
              },
              {
                id: "10-2",
                name: "品牌名称",
              },
              {
                id: "10-2",
                name: "品牌名称",
              },
              {
                id: "10-2",
                name: "品牌名称",
              },
              {
                id: "10-2",
                name: "品牌名称",
              },
              {
                id: "10-2",
                name: "品牌名称",
              },
              {
                id: "10-2",
                name: "品牌名称",
              },
            ],
          ],
        },
      ],
      recommendList: [],
    };
  },
  methods: {
    mousemove(item) {
      this.recommendList = item.children;
      if (item.id != "10") {
        this.isBrand = false;
      } else {
        this.isBrand = true;
      }
      const popUpBox = document.querySelector(".popUpBox");
      this.$nextTick(() => {
        popUpBox.classList.add("showing");
      });
    },
    mouseleave() {
      const popUpBox = document.querySelector(".popUpBox");
      this.$nextTick(() => {
        popUpBox.classList.remove("showing");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.HomePage_Carousel_left {
  position: absolute;
  top: 0;
  left: 0;
  width: 230px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99;
  padding: 15px 0px;

  .popUpBox {
    height: 100%;
    position: absolute;
    left: 230px;
    top: 0;
    background-color: rgba(242, 242, 242, 0.8);
    overflow: hidden;
    display: none;
  }

  /* 定义动画关键帧 */
  @keyframes slideRight {
    0% {
      width: 0;
    }
    100% {
      width: 970px;
    }
  }

  /* 应用动画 */
  .showing {
    display: block;
    animation: slideRight 0.5s ease-in-out forwards;
  }

  .carousel-item {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-around;

    .item-container {
      display: flex;

      .item-text {
        color: #fff;
        font-size: 14px;
        margin-right: 5px;
      }

      .item-submenu {
        span {
          color: #ccc;
          font-size: 12px;
          margin-right: 5px;
        }
      }
    }
  }

  .carousel-item:hover {
    background-color: #1abc9c;
  }

  .arrow-icon {
    .icon-style {
      color: #fff;
      font-size: 14px;
    }
  }

  .box-style {
    padding: 10px;
    width: 500px;
    .title-text {
      font-size: 14px;
      color: #666666;
      margin-right: 5px;
    }

    .recommend-text {
      color: #999999;
      font-size: 12px;
    }
  }

  .recommend-list {
    display: flex;
    width: 970px;
    height: 380px;
    flex-wrap: wrap;
    justify-content: space-around;

    .recommend-item {
      width: 300px;
      height: 100px;
      background-color: #fff;
      display: flex;

      .recommend-img {
        width: 100px;
        height: 100px;
        background-color: #e4e4e4;
      }

      .recommend-info {
        padding: 10px;

        .name-text {
          font-size: 14px;
          color: #666;
          margin-bottom: 10px;
        }

        .desc-text {
          font-size: 12px;
          color: #999;
          margin-bottom: 10px;
        }

        .price-text {
          font-size: 16px;
          color: red;
        }
      }
    }
  }
  .container {
    width: 970px;
    height: 100%;
    display: flex;
    cursor: pointer;
    .column {
      width: 50%;

      .header {
        height: 50px;
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .header-text {
          font-size: 14px;
          color: #666;

          &:hover {
            color: #1abc9c;
          }
        }

        .header-link {
          font-size: 12px;
          color: #666;
          &:hover {
            color: #1abc9c;
          }
        }
      }

      .brand-list {
        display: flex;
        height: 380px;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;

        .brand-item {
          width: 100px;
          height: 100px;

          .brand-logo {
            height: 70px;
            width: 70px;
            border-radius: 50%;
            background-color: #cccccc;
            margin: 0 auto;
          }

          .brand-name {
            text-align: center;
            font-size: 14px;
            color: #999;
            margin-top: 10px;

            &:hover {
              color: #1abc9c;
            }
          }
        }
      }
    }
  }
}
</style>
